<template>
    <div>
        <el-row>
            <!-- 信息查询 -->
            <el-form size="mini" inline ref="queryFormRef" :model="queryForm">
                <el-form-item label="班级名称" prop="className">
                    <el-input v-model="queryForm.className"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button type="info" @click="resetForm('queryForm'), getListClasses()">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 添加 -->
            <el-row>
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加</el-button>
            </el-row>

            <!-- 表格 -->
            <el-table :data="classList" style="width:100%">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="classId" label="班级名称" align="center" width="80" show-overflow-tooltip fixed>
                    <!-- 默认插槽：调用获取专业名称的函数 -->
                    <template #default="{ row }">
                        {{ getClassName(row.classId) }}
                    </template>
                </el-table-column>
                <el-table-column prop="stuCount" label="班级人数" align="center" width="250"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" width="300"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" align="center" width="300"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="{ row }">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-row type="flex" justify="center">
                <!-- .sync类似v-model，实现页面数据双向响应式 -->
                <el-pagination layout="prev, pager, next" :total="pageIniation.total" :page-size="pageIniation.pageSize"
                    :current-page.sync="pageIniation.pageNum" @current-change="getListClasses">
                </el-pagination>
            </el-row>

            <!-- 弹窗：实现添加和编辑功能 -->
            <el-dialog :visible.sync="dialog.visible" width="400px" @close="resetForm('dialogForm')">
                <template #title>{{ dialog.mode === "add" ? "添加班级" : "编辑班级名称" }}</template>
                <el-form :model="dialog.form" label-width="100px" label-position="top" size="small"
                    :rules="dialog.rules" ref="dialogFormRef">
                    <el-form-item label="班级名称" prop="className">
                        <el-input v-model="dialog.form.className">
                        </el-input>
                    </el-form-item>
                    <el-form-item align="center">
                        <el-button type="primary" @click="handleSubmit">确定</el-button>
                        <el-button type="info" @click="dialog.visible=false,resetForm('dialogForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import { listClasses, addClasses,editClasses,deleteClasses} from '@/api/classes.js';
import { query } from '@/utils/common.js'
export default {
    name: "",
    data() {
        return {
            //班级信息列表
            classList: [
                {
                    classId: "1",
                    className: "java",
                    stuCount: "1",
                    createTime: "09888",
                    updateTime: "097777",
                },

                {
                    classId: "1",
                    className: "java",
                    stuCount: "1",
                    createTime: "09888",
                    updateTime: "097777",
                },
            ],

            //分页
            pageIniation: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },

            //信息查询
            queryForm: {
                // classId:undefined,
                className: undefined,
            },

            //添加或编辑的弹窗
            dialog: {
                mode: "add",//添加班级标志
                visible: false,
                form: {
                    classId: undefined,
                    className:undefined,
                },
                //校验：
                rules: {
                    className: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
                }
            }
        }
    },

    computed: {
        //获取班级名称
        getClassName() {
            return classId => {
                // console.log(classId);
                //将对象结构赋值，获取到班级名称
                const { className } = this.classList.find(classInfo => classInfo.classId === classId) || {}
                return className || "-"
            }
        },
    },
    created() {
        this.getListClasses()
    },
    methods: {
        //获取班级列表
        getListClasses(query = {}) {
            listClasses().then(res => {
                console.log(res.data);
                //将后端返回的数据赋值给classList，从而将数据展示在页面上
                this.classList = res.data

                //过滤掉多余的参数
                const { total, ...rest } = this.pageIniation
                listClasses({ ...rest, ...query }).then(res => {
                    this.classList = res.data.rows
                    this.pageIniation.total = res.data.count
                })
            })
        },


        //点击查询,获取到班级信息
        handleQuery() {
            //查询为空(包括空格)时，进行提示，提示先输入值，至少有一个输入框有值：some,用于数组
            const hasInput = query(this.queryForm)
            //符合条件，至少有一项符合
            if (hasInput) return this.getListClasses(this.queryForm)

            //不符合，进行提示
            this.$message.warning("请输入值！")
        },

        //查询后重置
        resetForm(refName) {
            this.$refs[`${refName}Ref`].resetFields()

        },

        //删除班级列表
        handleDelete(row) {
            //提示
            this.$confirm(`是否删除班级【${row.className}】？`, "系统提示", {
                type: "warning",
                //确定.then
            }).then(() => {
                deleteClasses(row.classId).then(res => {
                    
                    this.$message.success("res.msg")
                    //删除后，重新更新班级信息
                    this.getListClasses()
                })
                //取消.catch
            }).catch(() => { })
        },

        //添加
        handleAdd() {
            this.dialog.visible = true
            this.dialog.mode = "add"
        },

        //编辑
        handleEdit(row) {
            this.dialog.visible = true
            this.dialog.mode = "edit"

            //等dom更新之后再执行，解决：点击编辑之后再点添加显示的是编辑的信息的问题
            this.$nextTick(() => {
                //进行数据回显，信息显现在编辑表单
                this.dialog.form = JSON.parse(JSON.stringify(row))
            })

        },

        //确定提交信息
        handleSubmit() {
            //空值提交先进行校验提醒
            this.$refs[`dialogFormRef`].validate(async valid => {

                //检验失败
                if (!valid) return
                //校验成功(判断是添加还是编辑)
                //过滤不需要的参数
                let { createTime, updateTime, classId,...rest } = this.dialog.form
                let result = {}
                switch (this.dialog.mode) {
                    case "add":
                        try {
                            result = await addClasses({ ...rest })

                        } catch (error) {
                            break;
                        }

                    case "edit":
                        try {
                            result = await editClasses({ ...rest,classId })
                        } catch (error) {
                            break
                        }
                }

                //提示添加成功
                this.$message.success("添加成功")
                //更新班级信息
                this.getListClasses()
                //关闭弹窗
                this.dialog.visible = false
                //添加后重置表单
                this.resetForm("dialogForm")//this.resetForm(dialog.Form)

            })

        }

    },
}
</script>

<style lang="scss" scoped></style>